<template>
  <div class="home">
    <div class="showStyle">
        <div class="showList" v-for="(show,index) in list[this.$store.state.language]" :key="index">


            <div class="myimg" :style="{ 'background-image':`url('${show.pic}')` }">

              <!-- <img class="img" :src="show.pic" alt=""> -->
              
              </div>


            <div class="order_btn"><button @click="jumpToOrderList(show.id)" class="btn">{{ $t('ordergO') }}</button></div>
            <!-- <p class="title">
                <span class="span1">{{show.title}}</span>
                <span class="span2">{{show.dates}}</span>
            </p> -->
            <p class="title">{{show.title}}</p>
            <p class="address">{{show.address}}</p>
            <p class="dates">{{show.dates}}</p>
            <p class="content" v-html="show.description"></p>
        </div>
    </div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      // styleOBJ: {
      //   "background-image": ""
      // },
      list: [],
      shows: [
        {
          pic:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2254957257,3668952885&fm=26&gp=0.jpg",
          title: "作品名称",
          dates: "2018年10月10-2018年10月20",
          content: "作品简介",
          //address
          address: "北京市朝阳区酒仙桥2号"
        },
        {
          pic:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2254957257,3668952885&fm=26&gp=0.jpg",
          title: "作品名称",
          dates: "2018年10月10-2018年10月20",
          content: "作品简介",
          address: "北京市朝阳区酒仙桥2号"
        }
      ]
    };
  },
  methods: {
    // jumpToOrderList(id) {
    //   this.$router.push({ path: `/orderList/${id}` });
    // },
    jumpToOrderList(id) {
      //   this.$router.push({ path: `/reservation/orderList/${id}` });
      window.location.href = "/reservation/orderList/" + id;
    },
    getOrder() {
      this.$http
        .get("/appointmentIndex", {})
        .then(response => {
          this.list = response.data;

          // this.styleOBJ["background-image"] = "url('')";
        })
        .catch(function(response) {
          console.log(response);
        });
    }
  },
  created() {
    this.getOrder();
  }
};
</script>
<style lang="scss" scoped>
.ignore {
  border-bottom: 1px solid black;
}
.home {
  width: 100%;
  display: flex;
  flex-flow: column;

  .bottom {
    width: 100%;
    position: relative;
    top: 53px;
    img {
      width: 100%;
      height: auto;
    }
    ul {
      font-size: 22px;
      li {
        height: 38.8px;
        line-height: 38.8px;
        list-style-type: none;

        position: relative;
        left: -24px;
        top: -6px;
        a {
          text-decoration: none;
          color: black;
        }
      }
    }
  }
  .showStyle {
    width: 100%;
    position: relative;
    .showList {
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      .myimg {
        margin-top: 15px;
        width: 345px;
        height: 180px;
        //         background-image: url(http://perrotion.artcare.com/exhibition/local/exhibition15409692847862.png);
        // overflow: hidden;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-size: cover !important;
        // height: 250px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .order_btn {
        width: 345px;
        margin: 15px 0 0px 0;
        text-align: center;
        .btn {
          border: 2px solid #000;
          background: #fff;
          padding: 2px 10px;
          font-size: 14px;
          width: 120px;
          height: 29.6px;
        }
      }
      .title {
        width: 345px;
        font-size: 15px;
        margin: 20px 0 0 0;
        font-weight: bold;
      }
      .address {
        width: 345px;
        font-size: 12px;
        margin: 8px 0 0 0;
      }
      .dates {
        width: 345px;
        font-size: 11px;
        margin: 8px 0 0 0;
      }
      .content {
        width: 345px;
        font-size: 15px;
        line-height: 22px;
        margin: 12px 0 0 0;
        // line-height: 16px;
        padding-bottom: 25px;
        // text-align: justify;
        // text-justify: inter-character;
      }
    }
  }
}
</style>

